.content {
    width: 60%;
    float: right;
    padding: 2.5%;
}
.img > img {
    width: 100%;
}
.center-2 {
    height: 30%;
}
.line {
    display: inline-block;
    width: 6%;
    height: 20px;
    background: url("../img/other/dotted_line.png") no-repeat center;
    background-size: contain;
}
.year {
    padding-left: 2%;
    color: #333333;
    font-size: 25px;
    padding-bottom: 2%;
}
.year > span {
    display: inline-block;
    padding: 0 1%;
}
.year > span:hover {
    transition: transform 0.3s;
    transition: color 0.2s;
    transform: scale(1.3);
    color: #c9ac51;
}
.years-banner{
    position:absolute;
    height: 100%;
    width: 100%;
}
.years-banner>li{
    position: absolute;
    left: 100%;
}
.background{
    overflow: hidden;
}
.center-2{
    position: relative;
    overflow: hidden;
}
/*donghua*/
@keyframes in{
    from{left:100%;}
    to{left:0}
}
@-webkit-keyframes in{
    from{left:100%;}
    to{left:0}
}
@-moz-keyframes in{
    from{left:100%;}
    to{left:0}
}
@-o-keyframes in{
    from{left:100%;}
    to{left:0}
}
@keyframes out{
    from{left:0px;}
    to{left:-100%;}
}
@-webkit-keyframes out{
    from{left:0px;}
    to{left:-100%;}
}
@-moz-keyframes out{
    from{left:0px;}
    to{left:-100%;}
}
@-o-keyframes out{
    from{left:0px;}
    to{left:100%;}
}
.years-banner .show{
    animation:in 1s;
    -webkit-animation:in 1s;
    -moz-animation:in 1s;
    -o-animation:in 1s;
    left:0px;
}
.years-banner .hide{
    animation:out 1s;
    -webkit-animation:out 1s;
    -moz-animation:out 1s;
    -o-animation:out 1s;
    left:100%;
}
.years-banner>li{
    width:100%;
    height:100%;
    position:absolute;
    left:100%;
    top:0;
}
.css-year{
    transform: scale(1.3);
    color: #c9ac51;
}